<template>
  <div>
    <el-card>
      <el-form :inline="true" :model="query" label-width="100px" size="small">
        <!-- 晋升类型 -->
        <el-form-item v-if="type == 1" class="query-form-item">
          <span>晋升类型：</span>
          <el-select
            v-model="query.promotioncategoryid"
            placeholder="请选择晋升类型"
            @change="onSubmit"
            clearable
          >
            <!-- <el-option label="全部" value></el-option> -->
            <el-option
              v-for="item in dataList"
              :key="item.promotioncategoryid"
              clearable
              :label="item.categoryname"
              :value="item.promotioncategoryid"
            ></el-option>
          </el-select>
        </el-form-item>
        <!-- 审核状态 -->
        <el-form-item class="query-form-item">
          <span>审核状态：</span>
          <el-select
            v-model="query.auditstatus"
            placeholder="请选择状态"
            @change="onSubmit"
            clearable
          >
            <el-option label="审核中" value="0"></el-option>
            <el-option label="通过" value="1"></el-option>
            <el-option label="驳回" value="2"></el-option>
            <!-- <el-option label="已生效" value="3"></el-option> -->
          </el-select>
        </el-form-item>

        <!-- 生效状态 -->
        <el-form-item class="query-form-item">
          <span>生效状态：</span>
          <el-select
            v-model="query.effectivestatus"
            placeholder="请选择状态"
            @change="onSubmit"
            clearable
          >
            <el-option label="未生效" value="0"></el-option>
            <el-option label="已生效" value="1"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <el-form :inline="true" :model="query" label-width="100px" size="small">
        <!-- 商户账号查询 -->
        <el-form-item>
          <span>商户账号：</span>
          <el-form-item class="query-form-item">
            <el-input
              v-model="query.account"
              placeholder="商户账号"
              prefix-icon="el-icon-search"
              @keyup.enter.native="onSubmit"
              clearable
            ></el-input>
          </el-form-item>
          <span>企业名称：</span>
          <el-form-item class="query-form-item">
            <el-input
              v-model="query.enterprisename"
              placeholder="请输入企业名称"
              prefix-icon="el-icon-search"
              @keyup.enter.native="onSubmit"
              clearable
            ></el-input>
          </el-form-item>
          <!-- 查询框 -->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-refresh"
              @click="onRest"
            ></el-button>
            <el-button type="primary" icon="el-icon-search" @click="onSubmit"
              >查询</el-button
            >
          </el-form-item>
        </el-form-item>
      </el-form>
      <!-- table表单 -->
      <el-table
        ref="singleTable"
        :data="tableData"
        v-loading="loading"
        style="width: 100%"
      >
        <el-table-column
          label="序号"
          type="index"
          align="center"
          width="50"
          fixed
        >
        </el-table-column>
        <el-table-column
          prop="auditstatus"
          align="center"
          label="审核状态"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.auditstatus == 0" style="color: #ffa659"
              >审核中</span
            >
            <span v-else-if="scope.row.auditstatus == 1" style="color: #4acf1e"
              >通过</span
            >
            <span v-else-if="scope.row.auditstatus == 2" style="color: #dc0101"
              >驳回</span
            >
            <span v-else-if="scope.row.auditstatus == 3" style="color: #dc0101"
              >已生效</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="effectivestatus"
          align="center"
          label="生效状态"
          width="120"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.effectivestatus == 0" style="color: #ffa659"
              >未生效</span
            >
            <span
              v-else-if="scope.row.effectivestatus == 1"
              style="color: #4acf1e"
              >已生效</span
            >
            <span v-else style="color: #4acf1e">无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="enterprisename"
          align="center"
          label="企业名称"
          width="180"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.enterprisename">{{
              scope.row.enterprisename
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="categoryname"
          align="center"
          label="晋升类型"
        ></el-table-column>
        <el-table-column
          prop="account"
          align="center"
          label="商户账号"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="brandname"
          align="center"
          label="商户隶属品牌"
          width="140"
        >
        </el-table-column>
        <el-table-column
          prop="company"
          align="center"
          label="商户任职公司"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="identity"
          align="center"
          label="商户身份"
        ></el-table-column>

        <el-table-column
          prop="createtime"
          align="center"
          label="申请生成时间"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.createtime != null"></i>
            <span v-if="scope.row.createtime != null">{{
              scope.row.createtime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="audittime"
          align="center"
          label="申请审核时间"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.audittime != null"></i>
            <span v-if="scope.row.audittime != null">{{
              scope.row.audittime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column
          prop="effectivetime"
          align="center"
          label="申请生效时间"
          width="180"
        >
          <template slot-scope="scope">
            <i class="el-icon-time" v-if="scope.row.effectivetime != null"></i>
            <span v-if="scope.row.effectivetime != null">{{
              scope.row.effectivetime | formatDateStr("yyyy-MM-dd hh:mm:ss")
            }}</span>
            <span v-else>无</span>
          </template>
        </el-table-column>

        <el-table-column align="center" label="操作" fixed="right" width="230">
          <template slot-scope="scope">
            <el-button
              type="success"
              size="mini"
              @click="handlePass(scope.row)"
              :disabled="scope.row.auditstatus != 0"
              >通过</el-button
            >
            <el-button
              type="danger"
              size="mini"
              @click="rejectionApplication(scope.row)"
              :disabled="scope.row.auditstatus != 0"
              >驳回</el-button
            >
            <el-button
              type="primary"
              size="mini"
              @click="
                (dialogFormVisible = true), handleDtail(scope.$index, scope.row)
              "
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 驳回的dialog -->
      <el-dialog
        title="请填写驳回原因"
        :visible.sync="dialogTableVisible"
        :close-on-click-modal="false"
        @close="dialogTableVisibleClose"
      >
        <el-form>
          <el-form-item label="驳回原因：">
            <el-input
              type="textarea"
              style="width: 600px"
              v-model="reasons"
            ></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogTableVisible = false">取 消</el-button>
          <el-button type="primary" @click="reject">驳 回</el-button>
        </div>
      </el-dialog>
      <!-- dialog详情页 -->
      <el-dialog
        title="查看详情"
        :visible.sync="dialogFormVisible"
        width="50%"
        top="5vh"
        :close-on-click-modal="false"
      >
        <template slot="title">
          <div class="avue-crud__dialog__header">
            <span class="el-dialog__title">
              <span
                style="
                  display: inline-block;
                  background-color: #3478f5;
                  width: 3px;
                  height: 20px;
                  margin-right: 5px;
                  float: left;
                  margin-top: 2px;
                "
              ></span>
              查看详情
            </span>
          </div>
        </template>
        <el-card>
          <el-form :model="tableList">
            <el-form-item
              label-width="200px"
              label="申请类型："
              style="width: 100%; display: inline-block"
            >
              <span>{{ tableList.categoryname }}</span>
            </el-form-item>
            <el-form-item
              label-width="200px"
              label="申请状态："
              style="width: 100%; display: inline-block"
            >
              <span>{{
                tableList.auditstatus == 0
                  ? "审核中"
                  : tableList.auditstatus == 1
                  ? "通过"
                  : "驳回"
              }}</span>
            </el-form-item>
            <el-form-item
              v-if="tableList.auditstatus == 2"
              label-width="200px"
              label="驳回理由："
              style="width: 100%; display: inline-block"
            >
              <span>{{ tableList.rejectreason || "无" }}</span>
            </el-form-item>
            <el-form-item
              label-width="200px"
              label="申请状态："
              style="width: 100%; display: inline-block"
            >
              <span>{{
                tableList.effectivestatus == 0 ? "未生效" : "已生效"
              }}</span>
            </el-form-item>
          </el-form>
        </el-card>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="dialogFormVisible = false"
            >确定</el-button
          >
        </div>
      </el-dialog>
      <el-pagination
        class="pagination-container"
        background
        :page-size="query.pageSize"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,sizes,prev, pager, next, jumper"
        :current-page="this.query.currentPage"
        :page-sizes="[5, 10, 20, 30, 50]"
        :total="totalNumber"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { selectProduction } from "../../api/selectProduction/index.js";
import {
  getMbUserAapplyMgrAudit,
  addmbUserApplyAudit,
  getFirstChangeList,
  firstStatusChange,
} from "../../api/selectProduction/index.js";
export default {
  data() {
    return {
      type: 1,
      tableData: [], //列表集合
      tableList: {}, //详情框信息
      query: {
        currentPage: 1,
        pageSize: 5,
        promotioncategoryid: "",
        auditstatus: "", //审核状态:0.审核中  1.通过  2.驳回
        effectivestatus: "", // 生效状态：0.未生效  1.已生效
        account: "",
        enterprisename: "", //企业名称
      },
      dataList: [],
      totalNumber: 0,
      loading: false,
      dataList: [],
      disabled: false,
      dialogTableVisible: false,
      dialogFormVisible: false,
      rejectData: [],
      reasons: "",
      formLabelWidth: "120px",
      rejectId: null, //驳回id
    };
  },
  methods: {
    // 下拉框获取数据
    selectProduction() {
      selectProduction()
        .then((data) => {
          // console.log(data)
          this.dataList = data.data;
        })
        .catch((err) => {
          this.$message.error(err);
        });
    },
    // 列表数据获取
    getMbUserAapplyMgrAudit() {
      this.loading = true;

      getMbUserAapplyMgrAudit(this.query)
        .then((data) => {
          console.log(data);
          if (data.code != 0) {
            this.$message.error(response.message);
            this.loading = false;
            return false;
          }
          this.tableData = data.data.list || [];
          this.totalNumber = data.data.totalNumber || 0;
          // console.log(this.tableData)
          setTimeout(() => {
            this.loading = false;
          }, 0.3 * 1000);
        })
        .catch((err) => {
          this.loading = false;
          this.tableData = [];
        });
    },
    //详情
    handleDtail(i, val) {
      console.log(i);
      console.log(val);
      //列表详情赋值
      this.tableList = val || {};
    },
    typeChange(type) {
      this.type = type;
      this.onRest();
    },
    //刷新
    onRest() {
      this.query = {
        currentPage: 1,
        promotioncategoryid: "",
        auditstatus: "", //审核状态:0.审核中  1.通过  2.驳回
        effectivestatus: "", // 生效状态：0.未生效  1.已生效
        account: "",
        enterprisename: "", //企业名称
        pageSize: 5,
      };

      this.getMbUserAapplyMgrAudit();
    },
    //查询
    onSubmit() {
      this.query.currentPage = 1;
      this.getMbUserAapplyMgrAudit();
      // console.log('submit!');
    },
    //驳回信息
    rejectionApplication(val) {
      this.rejectId = val.relationtempid;

      this.dialogTableVisible = true;
    },
    //通过
    handlePass(val) {
      this.$confirm("是否确认通过?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const formData = {
            relationtempid: val.relationtempid,
            auditstatus: 1,
          };
          addmbUserApplyAudit(formData)
            .then((response) => {
              console.log(response);
              if (response.code != 0) {
                this.$message.error(response.message);
                return false;
              }
              this.$message.success("通过审核！");
              this.onRest();
              this.dialogTableVisible = false;
            })
            .catch(() => {
              this.loading = false;
            });
        })
        .catch(() => {
          this.$message.info("已取消");
        });
    },
    //直接驳回
    reject() {
      if (this.reasons != "") {
        this.$confirm("是否确认驳回?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            const obj = {
              auditstatus: 2,
              relationtempid: this.rejectId,
              rejectreason: this.reasons,
            };
            addmbUserApplyAudit(obj)
              .then((response) => {
                console.log(response);
                if (response.code != 0) {
                  this.$message.error(response.message);
                  return false;
                }
                this.$message.success("驳回成功");
                this.onRest();
                this.dialogTableVisible = false;
              })
              .catch(() => {
                this.loading = false;
              });
          })
          .catch(() => {
            this.$message.info("已取消");
          });
      } else {
        this.$message.error("请填写驳回信息");
      }
    },
    // 驳回框关闭
    dialogTableVisibleClose() {
      this.rejectId = null;
      this.reasons = "";
    },
    handleCurrentChange(val) {
      this.query.currentPage = val;
      //scrollTo(0, 800);
      this.getMbUserAapplyMgrAudit();
    },
    handleSizeChange(val) {
      this.query.pageSize = val;
      this.getMbUserAapplyMgrAudit();
    },
  },

  mounted() {
    this.selectProduction();
  },
  created() {
    this.getMbUserAapplyMgrAudit();
  },
};
</script>
